<script setup lang="ts">
import {getLogisticsAPI} from '@/services/order'
import type { Express, Location } from '@/types/order';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import AMapLoader from "@amap/amap-jsapi-loader";
// 如果在js/ts 当中使用 本地图片, 然后地址需要解析(比如有 @ 符号或者相对地址../ 之类)
// 不能当做普通字符串来处理
// 必须模块化导入的形式使用才行
import endImg from "@/assets/end.png";
import startImg from "@/assets/start.png";
import carImg from "@/assets/car.png";

const route = useRoute()

const list = ref<Express[]>([])
const logisticsInfo = ref<Location[]>([])

const getLogistics = async () => {
  const {data} = await getLogisticsAPI(route.query.orderId as string)
  console.log(data);
  // 物流记录列表
  list.value = data.list
  // 轨迹数据
  logisticsInfo.value = data.logisticsInfo
}


// 地图相关
// 定义安全码申请高德应用时得到
window._AMapSecurityConfig = {
  securityJsCode: "a6e690a110d6c39252ff7bd2e7554dc8",
};

const initMap = async () => {
  // 确保尾流数据获取完毕再显示地图
  // await getLogistics()

  // 计算轨迹数组
  // const locationArr = logisticsInfo.value.map(item=>{
  //   return [item.longitude, item.latitude]
  // })

  const locationArr = [
    // 输出广州塔经纬度数组
    [113.32466, 23.1066],
    // 输出深圳世界之窗的经纬度数组
    [114.025967, 22.546053],
    // 输出上海东方明珠塔经纬度数组
    [121.509063, 31.24549],
    // 输出北京天安门经纬度数组
    [116.40742, 39.90421]
  ]

  // 加载地图库
  const AMap = await AMapLoader.load({
    key: "c38960dae48eee3771a7c0708320c48d", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Driving'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
  })

  // 创建地图实例
  const map = new AMap.Map("map", {
    center: locationArr[0], //设置地图中心点
  }); //"container"为 <div> 容器的 id

  // 设置起点和终点
  // shift 函数可以从数组中取出第一个数据, 并且改变原数组
  // pop 可以从数组中取出最后一个数据, 并且改变原数组
  const start = locationArr.shift()
  const end = locationArr.pop()
  
  // 创建导航实例
  const driving = new AMap.Driving({
    map: map,
    showTraffic: false,
    hideMarkers: true
  });

  // 实际导航
  driving.search(start, end, {
    waypoints: locationArr
  })

  // 添加 markers 标记
  const startMarker = new AMap.Marker({
    position: start,
    icon: startImg,
    offset: new AMap.Pixel(-10, -10),
  })
  map.add(startMarker)

  const endMarker = new AMap.Marker({
    position: end,
    icon: endImg,
    offset: new AMap.Pixel(-10, -10),
  })
  map.add(endMarker)

  locationArr.forEach(point => {
    const carPoint = new AMap.Marker({
      position: point,
      icon: carImg,
      offset: new AMap.Pixel(-10, -10),
    })
    map.add(carPoint)
  });  
}

initMap()


</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>配送中</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">订单派送中 预计明天送达</p>
        <p class="predict">
          <span>申通快递</span>
          <span>7511266366963366</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0"> 
        <van-step v-for="item in list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{item.content}}</p>
          <p class="time">{{item.createTime}}</p>
        </van-step>        
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>